<template>
	<e-transition :show="props.show" custom-class="e-overlay" :duration="props.duration" :custom-style="overlayStyle"
		@click="clickHandler">
		<slot />
	</e-transition>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * overlay 遮罩
	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
	 * @tutorial https://www.uviewui.com/components/overlay.html
	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
	 * @property {Object}			customStyle	定义需要用到的外部样式
	 * @event {Function} click 点击遮罩发送事件
	 * @example <e-overlay :show="show" @click="show = false"></e-overlay>
	 */
	export default defineComponent({
		name: "e-overlay",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from "vue";
	import {
		overlayProps,
		overlayEmits
	} from "./props";
	import {
		deepMerge
	} from "../../libs/utils";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		addStyle
	} from "../../libs/utils/_utils";
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		overlay: overlayDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(overlayProps)
	const props = useDefaultProps < DefaultProps['overlay'] > (_props, overlayDefaultProps);
	const emit = defineEmits(overlayEmits);

	const overlayStyle = computed(() => {
		const style = {
			position: "fixed",
			top: 0,
			left: 0,
			right: 0,
			zIndex: props.value.zIndex,
			bottom: 0,
			"background-color": `rgba(0, 0, 0, ${props.value.opacity})`,
		};
		return deepMerge(style, addStyle(props.value.customStyle as Record<string,any>) as Record<string,any>);
	});
	const clickHandler = () => {
		emit("click");
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/overlay.scss";
</style>
